<template>
	<div class="edit-account">
        <form @submit="formSubmit">
		<!-- 姓名 -->
		<div class="edit-item" v-if="realnameShow">
			<input placeholder-style="color:#ccc" name="realname" v-model="realname" type="text" value="" placeholder="请输入真实姓名" />
		</div>
		<!-- 性别 -->
		<div class="edit-radio" v-if="sexShow">
			<radio-group class="edit-radio-desc" name="sex" @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd">
						<radio value="2" :checked="sex=='男'" />男
				</label>
				<label class="uni-list-cell uni-list-cell-pd">
						<radio value="1" :checked="sex=='女'" />女
				</label>
			</radio-group>
		</div>
		<!-- 出生日期 -->
		<div class="edit-item-picker" v-if="birthdayShow">
			 <picker mode="date" name="birthday" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{birthday}}</view>
			</picker>
		</div>
		<!-- QQ号 -->
		<div class="edit-item" v-if="qqShow">
			<input name="qq" v-model="qq" placeholder-style="color:#ccc" type="text" value="" placeholder="请输入QQ" />
		</div>
		<!-- 修改密码 -->
		<div class="edit-item" v-if="passwordShow" style="background:none;">
			<input  style="background:#fff;" placeholder-style="color:#ccc" name="ingpassword" type="text" value="" placeholder="请输入当密码" />
			<input style="background:#fff;" placeholder-style="color:#ccc" name="password1" type="text" value="" placeholder="请输入新密码" />
			<input style="background:#fff;" placeholder-style="color:#ccc" name="password2" type="text" value="" placeholder="请确认密码" />
		</div>
		<view style="padding:30rpx;">
			<button formType="submit" type="primary" class="grace-button">更新</button>
		</view>
        </form>
		<p class="copy-text">渝ICP备19010173号-41</p>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import fab from '@/components/fab'
    var  graceChecker = require("@/graceUI/jsTools/graceChecker.js")
    import { saveUserInfo,getAuth } from '@/api/user'
	export default{
		data(){
			return{
				isTopBtn:false,
                realnameShow:false,
                sexShow:false,
                birthdayShow:false,
                qqShow:false,
                passwordShow:false,
                realname:'',
                sex:'',
                birthday:'',
                qq:''
			}
		},
		onLoad(e) {
            let type = e.type;
            let data = e.data;
            if(type=='realname'){
                this.realnameShow=true;
                this.realname = data;
            }
            if(type=='sex'){
                this.sexShow=true;
                this.sex =data;
            }
            if(type=='birthday'){
                this.birthdayShow=true;
                this.birthday=data;
            }
            if(type=='qq'){
                this.qqShow=true;
                this.qq=data;
            }
            if(type=='password'){
                this.passwordShow=true;
            }
		},
		components:{
			fab
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
            userInfo(){
            	return getAuth();
            }
		},
		methods:{
            radioChange(e){
                if(e.detail.value==2){
                    this.sex='男'
                }else{
                    this.sex='女'
                }
            }, 
            formSubmit(e){
                let key = '';
                if(this.realnameShow){
                    key = 'realname';
                    var rule = [
                    	{ name: "realname", checkType: "string", checkRule: "1,20", errorMsg: "收货人姓名应为1-20个字符" },
                    ];
                }
                if(this.sexShow){
                    key = 'sex';
                    var rule = [
                    	{ name: "sex", checkType: "notnull", errorMsg: "请选择性别" },
                    ];
                }
                if(this.birthdayShow){
                    key = 'birthday';
                    var rule = [
                    	{ name: "birthday", checkType: "notnull", errorMsg: "请选择生日" },
                    ];
                }
                if(this.qqShow){
                    key = 'qq';
                    var rule = [
                    	{ name: "qq", checkType: "notnull", errorMsg: "请输入QQ" },
                    ];
                }
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    let upData = {};
                    upData.username = this.userInfo.username;
                    upData.field = key;
                    upData[key] = formData[key]
                   saveUserInfo(upData).then((res)=>{
                       if(res.data.status==1){
                           uni.navigateBack({
                               delta:1
                           });
                       }
                   })
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
            },
			bindDateChange: function(e) {
				this.birthday = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.edit-radio{
		width:690rpx;
		margin:0 auto;
		background:#fff;
		margin-top:30rpx;
		padding:30rpx 0;
		.edit-radio-desc{
			display: flex;
			justify-content: flex-start;
			label{
				margin-left:30rpx;
				radio{
					margin-right:10rpx;
				}
			}
		}
	}
	.edit-item-picker{
		width:690rpx;
		margin:0 auto;
		background:#fff;
		margin-top:30rpx;
		padding:30rpx 0;
		picker{
			padding-left:30rpx;
		}
	}
	.edit-item{
		width:690rpx;
		margin:0 auto;
		background:#fff;
		margin-top:30rpx;
		border-radius:10rpx;
		input{
			border:1px solid #eee;
			padding:20rpx 20rpx;
			font-size:28rpx;
			border-radius:10rpx;
			margin-bottom:30rpx;
		}
	}
	.grace-button{
		background: #fd8197 !important;
		color:#fff !important;
		font-size:28rpx !important;
		border:none !important;
		padding:10rpx 0;
		&:after{
			border:none !important;
		}
	}
	.copy-text{
		color:#666;
		font-size:24rpx;
		text-align: center;
		margin-top:60rpx;
	}
</style>
